<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>黑马头条</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../plugins/vant/index.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../../../plugins/css/index.css">
</head>

<body>
<div id="app">
    <div class="article">
        <script>
                        var _authorApUserId= 4
        </script>
        <div style="display:none;">4</div>
            <van-row>
                <van-col span="24" class="article-title" >曼晚：萨顿预测曼联平布莱顿 默森劳伦森看好红魔小胜</van-col>
            </van-row>

            <van-row type="flex" align="center" class="article-header">
                <van-col span="3">
                    <van-image round class="article-avatar" src="https://p3.pstatp.com/thumb/1480/7186611868"></van-image>
                </van-col>
                <van-col span="16">
                    <div>admin</div>
                    <div>2022-8-7 16:48:17</div>

                </van-col>
                <van-col span="5">
                    <van-button round :icon="relation.isfollow ? '' : 'plus'" type="info" class="article-focus"
                                :text="relation.isfollow ? '取消关注' : '关注'" :loading="followLoading" @click="handleClickArticleFollow">
                    </van-button>
                </van-col>
            </van-row>
        <van-row class="article-content">
                        <van-col span="24" class="article-text">直播吧8月7日讯 据《曼彻斯特晚报》报道，北京时间周日晚21:00，英超第1轮，曼联将在主场迎来布莱顿。赛前，三位专家给出预测。</van-col>
                        <van-col span="24" class="article-text">作为本赛季新加盟BBC的评论嘉宾，前英超金靴克里斯-萨顿在他BBC的第一批预测专栏中写道：“我不知道对曼联该抱有什么样的期待。C罗整个的情况，以及他是不是会留下来，真的很具有破坏性。曼联新帅滕哈赫原本可以不遭遇这个问题的。前去老特拉福德开始首场比赛，过去曾经是一个令人畏惧的情况，但如今不是了。上赛季在自己的主场美国运通球场，布莱顿曾以4比0大胜过他们，所以他们不会害怕曼联。我很喜欢看波特带领下的这支‘海鸥’，我想他们会在客场有所收获。”</van-col>
                        <van-col span="24" class="article-text">萨顿预测：曼联1-1布莱顿</van-col>
                        <van-col span="24" class="article-text">前英格兰国脚保罗-默森在Sportskeeda节目中表示：“曼联现在有很多决定要去做。人们告诉我‘安东尼（马夏尔）回来了，他们会做得很好’！然而，马夏尔不会为你赢得任何东西。上赛季在曼联苦苦挣扎的时候，他就被租出去了，这足以说明一切。马夏尔在他状态来了的时候，会踢得很好，但也就仅此而已了。他可以在周日上演帽子戏法，也可以之后的一个月里再也不进球——我们中不会有人对这种情况感到惊讶。（曼联有）桑乔、拉什福德和马夏尔，但是没有合适的射手。”</van-col>
                        <van-col span="24" class="article-text">“滕哈赫与C罗现在陷入了那种‘第二十二条军规’式的困境。他可能希望C罗执行离队计划，但他在现在阵容中没有（C罗的）替补。对主教练来说，这是一个巨大的冲击——我们谈论的可是曼联。你可能认为他们现在已经有了一个合适的中锋。但如果他留下来，让我选，我会在每周的联赛里把C罗放在马夏尔的出场顺位之前。”</van-col>
                        <van-col span="24" class="article-text">“我想，布莱顿会去老特拉福德踢出一场好球。他们会控制住球权，并试图去击败曼联。我看好曼联赢下这场比赛，因为他们有了一位新教练，但如果他们在主场丢分，我也不会感到惊讶。”</van-col>
                        <van-col span="24" class="article-text">默森预测：曼联2-1布莱顿</van-col>
                        <van-col span="24" class="article-text">利物浦名宿、Paddy Power预测专家马克-劳伦森认为：“曼联将迎来滕哈赫执教的第一场联赛。我很喜欢这支球队，看看他们的表现会很有趣。我想他是克洛普的学生，所以战术会是压迫、压迫、再压迫。布莱顿是一支踢法流畅的球队，也会为实现自己的目标而奋战。”</van-col>
                        <van-col span="24" class="article-text">劳伦森预测：曼联2-0布莱顿</van-col>
                        <van-col span="24" class="article-text">（菲利克斯猫）</van-col>
        </van-row>

        <van-row type="flex" justify="center" class="article-action">
            <van-col>
                <van-button round :icon="relation.islike ? 'good-job' : 'good-job-o'" class="article-like"
                            :loading="likeLoading" :text="relation.islike ? '取消赞' : '点赞'" @click="handleClickArticleLike"></van-button>
                <van-button round :icon="relation.isunlike ? 'delete' : 'delete-o'" class="article-unlike"
                            :loading="unlikeLoading" @click="handleClickArticleUnlike">不喜欢</van-button>
            </van-col>
        </van-row>

        <!-- 文章评论列表 -->
        <van-list v-model="commentsLoading" :finished="commentsFinished" finished-text="没有更多了"
                  @load="onLoadArticleComments">
            <van-row id="#comment-view" type="flex" class="article-comment" v-for="(item, index) in comments" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                        <van-col span="3">
                            <van-button round size="normal" v-html="item.reply" @click="showCommentRepliesPopup(item.id)">回复 {{
                                item.reply || '' }}
                            </van-button>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <van-row>
            <van-col span="24" >
                <van-button round size="normal" @click="loadMoreComments">
                    查看更多
                </van-button>
            </van-col>
        </van-row>
    </div>
    <!-- 文章底部栏 -->
    <van-row type="flex" justify="space-around" align="center" class="article-bottom-bar">
        <van-col span="13">
            <van-field v-model="commentValue" placeholder="写评论">
                <template #button>
                    <van-button icon="back-top" @click="handleSaveComment"></van-button>
                </template>
            </van-field>
        </van-col>
        <van-col span="3">
            <van-button icon="comment-o" @click="handleScrollIntoCommentView"></van-button>
        </van-col>
        <van-col span="3">
            <van-button :icon="relation.iscollection ? 'star' : 'star-o'" :loading="collectionLoading"
                        @click="handleClickArticleCollection"></van-button>
        </van-col>
        <van-col span="3">
            <van-button icon="share-o"></van-button>
        </van-col>
    </van-row>

    <!-- 评论Popup 弹出层 -->
    <van-popup v-model="showPopup" closeable position="bottom"
               :style="{ width: '750px', height: '60%', left: '50%', 'margin-left': '-375px' }">
        <!-- 评论回复列表 -->
        <van-list v-model="commentRepliesLoading" :finished="commentRepliesFinished" finished-text="没有更多了"
                  @load="onLoadCommentReplies">
            <van-row id="#comment-reply-view" type="flex" class="article-comment-reply"
                     v-for="(item, index) in commentReplies" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentReplyLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <!-- TODO: js计算时间差 -->
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <!-- 评论回复底部栏 -->
        <van-row type="flex" justify="space-around" align="center" class="comment-reply-bottom-bar">
            <van-col span="13">
                <van-field v-model="commentReplyValue" placeholder="写评论">
                    <template #button>
                        <van-button icon="back-top" @click="handleSaveCommentReply"></van-button>
                    </template>
                </van-field>
            </van-col>
            <van-col span="3">
                <van-button icon="comment-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="star-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="share-o"></van-button>
            </van-col>
        </van-row>
    </van-popup>
</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../../../plugins/js/vue.min.js">
</script>
<script src="../../../plugins/js/vant.min.js"></script>
<!-- 引入 Axios 的 JS 文件 -->
<script src="../../../plugins/js/axios.min.js"></script>
<!-- 页面逻辑 -->
<script src="../../../plugins/js/index.js"></script>
</body>
</html>
